<template>
  <div>
    <h1>插槽案例</h1>
    <my-left :list="list">
      <template #default="{ id }">
        <button @click="del(id)">删除</button>
      </template>
    </my-left>

    <my-left :list="goods">
      <template #default="{ id }"
        ><button @click="edit(id)">编辑</button></template
      >
    </my-left>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft.vue";
export default {
  components: { MyLeft },
  data() {
    return {
      list: [
        { id: 2, name: "关羽" },
        { id: 4, name: "张飞" },
        { id: 5, name: "赵云" },
        { id: 7, name: "黄忠" },
        { id: 8, name: "马超" },
      ],
      goods: [
        { id: 2, name: "方便面" },
        { id: 4, name: "鸡爪子" },
        { id: 5, name: "火腿肠" },
        { id: 7, name: "大辣条" },
        { id: 8, name: "卤鸡蛋" },
      ],
    };
  },
  methods: {
    del(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
    edit(id) {
      const res = this.goods.find((item) => item.id == id);
      res.name = "大猪蹄";
    },
  },
};
</script>

<style>
</style>